﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"  
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:behaviors="clr-namespace:MVVM.Client.Infrastructure.Behaviors"
    xmlns:Views="clr-namespace:MVVM.Client.Views" 
    xmlns:ViewModels="clr-namespace:MVVM.Client.ViewModels"
    xmlns:prism="http://www.codeplex.com/prism" xmlns:GuidanceTools="clr-namespace:Microsoft.Practices.Prism.GuidanceTools;assembly=Microsoft.Practices.Prism.GuidanceTools" mc:Ignorable="d"
    x:Class="MVVM.Client.Views.QuestionnaireView"
    d:DesignWidth="640" d:DesignHeight="480" 
    d:DataContext="{d:DesignData /SampleData/QuestionnaireViewModelSampleData.xaml}">

    <UserControl.Resources>
        <DataTemplate x:Key="SubmitWindowTemplate">
            <Grid MinWidth="250" MinHeight="100">
                <TextBlock TextWrapping="Wrap" Grid.Row="0" Text="{Binding Message}"/>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ConfirmWindowTemplate">
            <Grid MinWidth="250" MinHeight="100">
                <TextBlock TextWrapping="Wrap" Grid.Row="0" Text="{Binding}"/>
            </Grid>
        </DataTemplate>

    </UserControl.Resources>

    <i:Interaction.Triggers>

        <prism:InteractionRequestTrigger SourceObject="{Binding SubmitErrorInteractionRequest}">
            <prism:PopupChildWindowAction ContentTemplate="{StaticResource SubmitWindowTemplate}"/>
        </prism:InteractionRequestTrigger>

        <prism:InteractionRequestTrigger SourceObject="{Binding CancelConfirmationInteractionRequest}">
            <prism:PopupChildWindowAction ContentTemplate="{StaticResource ConfirmWindowTemplate}"/>
        </prism:InteractionRequestTrigger>

    </i:Interaction.Triggers>

    <Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <!-- The values for the CurrentState property and the VisualState names happen to match, but that's not a requirement -->
        <i:Interaction.Triggers>
            <ei:DataTrigger Binding="{Binding CurrentState}" Value="Normal">
                <ei:GoToStateAction StateName="Normal"/>
            </ei:DataTrigger>
            <ei:DataTrigger Binding="{Binding CurrentState}" Value="Submitting">
                <ei:GoToStateAction StateName="Working"/>
            </ei:DataTrigger>
        </i:Interaction.Triggers>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStates">
                <VisualState x:Name="Working">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="WaitGridAnimation" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" From="0" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse1" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.0625"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse3" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.1875"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse5" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.3125"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse7" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.4375"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse0" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse2" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.125"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse4" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.25"/>
                        <DoubleAnimation Storyboard.TargetName="Ellipse6" Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.5" RepeatBehavior="Forever" BeginTime="0:0:0.375"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WaitingAnimationGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WaitingAnimationGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Right">
            <TextBlock Foreground="White" HorizontalAlignment="Right">Implementation Notes</TextBlock>
            <GuidanceTools:InfoTipToggleButton>
                <StackPanel MaxWidth="500">
                    <TextBlock TextWrapping="Wrap">This Reference Implementation demonstrates the following challenges:</TextBlock>
                    <TextBlock TextWrapping="Wrap">• The usage of several behaviors.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• Hierarchical ViewModels. The QuestionnaireViewModel is the main view model, and is composed of several child view models for each question.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• The INotifyPropertyChanged interface is implemented in the ViewModel base class (which is inherited from al ViewModel classes), to notify when the ViewModel property value has changed. The ViewModel class provides a base implementation of the INotifyPropertyChanged interface and helper methods to raise the PropertyChanged event.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• The INotifyDataErrorInfo interface is implemented in the DomainObject class to support validation. The model objects inherit from the DomainObject class which provides a base implementation of the INotifyDataErrorInfo interface and helper methods to set and clear the errors for particular properties.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• Triggering animations based on the view model state. When submitting the questionnaire, an animation is triggered. For more information, see the Submit button notes.</TextBlock>
                </StackPanel>
            </GuidanceTools:InfoTipToggleButton>
        </StackPanel>

        <ScrollViewer Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Stretch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Row="0" Text="{Binding Questionnaire.QuestionnaireTitle}" FontWeight="Bold" FontSize="24" Foreground="Gray" TextAlignment="Center" />

                <Border Grid.Row="1" Style="{StaticResource HeaderedBorderStyle}" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <i:Interaction.Triggers>
                            <ei:PropertyChangedTrigger Binding="{Binding (Validation.HasError), ElementName=ageTextBox}">
                                <ei:ChangePropertyAction PropertyName="HasAgeBindingError" TargetObject="{Binding}"
                                         Value="{Binding (Validation.HasError), ElementName=ageTextBox}"/>
                            </ei:PropertyChangedTrigger>
                        </i:Interaction.Triggers>

                        <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Bottom"><Run Text="Name"/></TextBlock>
                        <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Questionnaire.Name, Mode=TwoWay}" 
                                 Width="150" Margin="2" AutomationProperties.AutomationId="NameTextBoxAutomationId"/>

                        <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Bottom"><Run Text="Age"/></TextBlock>
                        <TextBox Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" 
                                 MaxLength="3" Width="40" Margin="2" 
                                 x:Name="ageTextBox" AutomationProperties.AutomationId="AgeTextBoxAutomationId" Text="{Binding Questionnaire.Age, Mode=TwoWay, UpdateSourceTrigger=Default, ValidatesOnExceptions=True}"/>

                    </Grid>
                </Border>
                <ItemsControl Grid.Row="2" IsTabStop="False" ItemsSource="{Binding Questions}">
                    <ItemsControl.Resources>
                        <DataTemplate DataType="ViewModels:OpenQuestionViewModel">
                                <Views:OpenQuestionView DataContext="{Binding}"/>
                            </DataTemplate>
                        <DataTemplate DataType="ViewModels:MultipleSelectionQuestionViewModel">
                                <Views:MultipleSelectionView DataContext="{Binding}"/>
                            </DataTemplate>
                        <DataTemplate DataType="ViewModels:NumericQuestionViewModel">
                                <Views:NumericQuestionView DataContext="{Binding}"/>
                            </DataTemplate>                        
                    </ItemsControl.Resources>                    
                </ItemsControl>
            </Grid>
        </ScrollViewer>
        <TextBlock Grid.Row="2" Grid.Column="0" Height="23" HorizontalAlignment="Left" Foreground="White"><Run Text="{Binding UnansweredQuestions}"/><Run Text=" "/><Run Text="questions remaining"/></TextBlock>
        <CheckBox Grid.Row="2" Grid.Column="0" Height="23" HorizontalAlignment="Right" Foreground="White" IsChecked="{Binding ForceSubmitFailure, Mode=TwoWay}" Margin="5,0">Force failure</CheckBox>
        <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" Margin="0,0,5,0">
            <Button  Content="Submit" Height="23" IsEnabled="{Binding CanSubmit}"  x:Name="button2" Width="75">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <ei:CallMethodAction TargetObject="{Binding}" MethodName="Submit"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            <GuidanceTools:InfoTipToggleButton>
                <StackPanel MaxWidth="500">
                    <TextBlock TextWrapping="Wrap">• The Submit button uses the CallMethodAction Blend behavior to execute the Submit method on the QuestionnaireViewModel view model.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• Its IsEnabled property is bound to the CanSubmit method of the QuestionnaireViewModel view model, so the button will be enabled depending on the property's value.</TextBlock>
                    <TextBlock TextWrapping="Wrap">• DataTriggers are used to set the VisualStateManager state depending on the CurrentState property of the QuestionnaireViewModel, thus triggering the submitting animation.</TextBlock>
                </StackPanel>
            </GuidanceTools:InfoTipToggleButton>
        </StackPanel>
        <Button Grid.Row="2" Grid.Column="2" Content="Cancel" Height="23" x:Name="button1" Width="75">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:CallMethodAction TargetObject="{Binding}" MethodName="Cancel"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

        <Grid x:Name="WaitingAnimationGrid" Visibility="Collapsed" Background="Black" Opacity="0.5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
            <Grid x:Name="WaitGridAnimation" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Margin="2" MaxWidth="130" MaxHeight="130" Background="{x:Null}">
                <Grid.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Grid.RenderTransform>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Ellipse  Grid.Row="0" Grid.Column="2" x:Name="Ellipse1" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="2" Grid.Column="4" x:Name="Ellipse3" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="4" Grid.Column="2" x:Name="Ellipse5" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="2" Grid.Column="0" x:Name="Ellipse7" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                </Grid>
                <Grid RenderTransformOrigin="0.5,0.5">
                    <Grid.RenderTransform>
                        <RotateTransform Angle="-45"/>
                    </Grid.RenderTransform>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Ellipse  Grid.Row="0" Grid.Column="2" x:Name="Ellipse0" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="2" Grid.Column="4" x:Name="Ellipse2" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="4" Grid.Column="2" x:Name="Ellipse4" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                    <Ellipse  Grid.Row="2" Grid.Column="0" x:Name="Ellipse6" MinWidth="1" MinHeight="1" Fill="{StaticResource WaitingAnimationColor}"/>
                </Grid>
            </Grid>
        </Grid>        
    </Grid>
        
</UserControl>
